<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-05-15 00:27:33
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-15 00:35:06
 * @FilePath: \starter-3\components\homepage\festivalBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="date-box">
        <div class="year-text">2025年第<span class="red"> {{ currentWeek }} </span>周，
            距离2026年还有<span class="red"> {{ daysToNextYear }} </span>天
        </div>
        <div class="festival-text">
            <div class="festival-day" v-for="(value, key) in festivalList" :key="key">
                距
                <span class="blue">{{ value.name }}</span>
                还有
                <span class="red">{{ value.days }}</span>
                天
            </div>
        </div>
    </div>
</template>

<script setup>

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
import 'dayjs/locale/zh-cn'
// 初始化 Day.js 插件
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.locale('zh-cn') // 设置中文本地化


const currentWeek = ref(1);
const daysToNextYear = ref(365);

const festivalList = ref({
  'daysToBlackFriday': {
    name: '黑五',
    days: ''
  },
  'daysToCyberMonday': {
    name: '网络星期一',
    days: ''
  },
  'daysToChristmas': {
    name: '圣诞节',
    days: ''
  },
  'springFestivalDays': {
    name: '春节',
    days: ''
  },
  'daysToValentinesDay': {
    name: '情人节',
    days: ''
  }
})
</script>

<style scoped></style>
